import IconFont from '@/components/IconFont';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import CommonInput from '@/pages/OrderModule/common/components/CommonInput';

import { Form,Button } from 'antd';
import { useState } from 'react';

/**
 * 保存快捷查询弹窗
 */
const SaveQuicklyQueryModal = (props) => {
  const { value, onChange, children, title = '另存为快捷查询', placeholder="请输入快捷查询名称" } = props;
  const [inputValue, setInputValue] = useState(value);

  const [show, toggleShow] = useState(false);
  const [form] = Form.useForm();

  const btn = children || <Button>另存为快捷查询</Button>;

  const openModal = () => {
    toggleShow(true);
    setInputValue(props.value);
  };

  const closeModal = () => {
    toggleShow(false);
  };

  return (
    <>
      <span onClick={openModal}>{btn}</span>
      <CommonModal
        title={{ title }}
        open={show}
        onCancel={closeModal}
        width={600}
        destroyOnClose
        onOk={(e) => {
          onChange?.(inputValue);
          closeModal();
        }}
      >
        <CommonInput value={inputValue} placeholder={placeholder} onChange={(e) => setInputValue(e.target.value)}></CommonInput>
      </CommonModal>
    </>
  );
};

export default SaveQuicklyQueryModal;